<template>
	<div class="flex relative justify-between w-11/12 h-100 mx-auto">
		<div class="div__border w-3/10 h-full" ref="leftRef"></div>
		<div class="div__border w-3/10 h-full" ref="rightRef"></div>
		<Button></Button>
	</div>
</template>

<script>
import Button from '@/components/button.vue'

export default {
	components: {
		Button
	},
	data() {
		return {
			leftCharts: null,
			rightCharts: null,
			leftData: [
				{ name: '20岁以下', value: 1 },
				{ name: '20-29岁', value: 4 },
				{ name: '20-39岁', value: 2 },
				{ name: '40-49岁', value: 2 },
				{ name: '50-59岁', value: 1 }
			],
			rightData: [
				{ name: '北京', value: 5 },
				{ name: '广州', value: 7 },
				{ name: '武汉', value: 3 },
				{ name: '上海', value: 4 },
				{ name: '深圳', value: 2 }
			]
		}
	},
	mounted() {
		this.init()
		this.leftPieCharts(this.leftData)

		this.init()
		this.rightPieCharts(this.rightData)
	},
	destroyed() {},
	methods: {
		init() {
			this.leftCharts = this.$echarts.init(this.$refs.leftRef)
			this.rightCharts = this.$echarts.init(this.$refs.rightRef)
			const INIT_OPTIONS = {
				title: {
					textStyle: {
						color: 'white',
						fontFamily: '微軟正黑體',
						fontWeight: 'lighter'
					},
					left: '3%',
					top: '3%'
				},
				grid: {
					show: false,
					width: '81%',
					left: '10%',
					top: '17%',
					bottom: '10%'
				},
				tooltip: {
					trigger: 'item'
				},
				series: [
					{
						type: 'pie',
						selectedMode: 'single',
						selectedOffset: 10
					}
				]
			}
			this.leftCharts.setOption(INIT_OPTIONS)
			this.rightCharts.setOption(INIT_OPTIONS)
		},
		leftPieCharts(data) {
			const LEFT_OPTION = {
				title: { text: '年龄分布' },
				series: [
					{
						data,
						radius: ['40%', '65%']
					}
				]
			}
			this.leftCharts.setOption(LEFT_OPTION)
			window.onresize = this.leftCharts.resize
		},
		rightPieCharts(data) {
			const RIGHT_OPTION = {
				title: {
					text: '地区分布'
				},
				series: [
					{
						data,
						radius: '65%',
						roseType: 'dadius'
					}
				]
			}
			this.rightCharts.setOption(RIGHT_OPTION)
			width.onresize = this.rightCharts.resize
		}
	}
}
</script>

<style></style>
